<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :xs="24" :md="12" :xl="4">
        <span class="dashboard-text">name:{{ name }}</span>
        <span class="dashboard-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></span>
      </el-col>
      <!-- <el-col   :xs="24" :md="12" :xl="4">
        <el-button type="info" icon="el-icon-message" circle style="float:right;" @click="toTime"/>
      </el-col>
      <el-col   :xs="24" :md="12" :xl="4">
        <div class="slider-container">
          <slider-show :slides="slides" :inv="invTime" />
        </div>
      </el-col> -->
      <el-col :xs="24" :md="12" :xl="4">
        <moor-switch
          v-model="lightSwitch">开关(开):</moor-switch>
        <moor-switch
          v-model="switchLight">开关(关):</moor-switch>
      </el-col>
      <el-col :xs="24" :md="12" :xl="4">
        <div v-clickoutside="handleClose" class="main">
          <button class="btn" @click="show = !show">点击显示下拉菜单</button>
          <div v-show="show" class="dropdown">
            <p>下拉框的内容，点击外面区域可以关闭</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 测试$attrs和$listeners -->
    <child-dom
      :foo="foo"
      :coo="coo"
      @upRocket="reciveRocket"
    />

    <p>父组件传入子组件的值：{{ value }}</p>
    <fieldset>
      <legend>子组件</legend>
      <child :val.sync="value"/>
    </fieldset>

    <item-list :activities="activities" style="margin-top:20px;"/>

    <!-- render function -->
    <el-button type="primary" plain @click="warning">提示</el-button>
    <field label="标题" type="input" />
    <field label="内容" type="textarea" />

    <el-date-picker
      v-model="form.date"
      :picker-options="pickerOptions"
      type="daterange"
      value-format="yyyyMMdd"
      format="yyyy-MM-dd"
      placeholder="选择日期"
      range-separator="至"
      unlink-panels/>

    <el-date-picker
      :clearable="false"
      :picker-options="pickerOptions0"
      v-model="startTime"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期"/>

    <el-date-picker
      :clearable="false"
      :picker-options="pickerOptions1"
      v-model="endTime"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期"/>

  </div>
</template>

<script>
import childDom from './components/child'
import child from './components/children'
import itemList from './components/itemList'
import field from './components/field'
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    childDom,
    child,
    itemList,
    field
  },
  directives: {
    clickoutside: {
      bind: function(el, binding, nvode) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
            return false
          }
          if (binding.expression) {
            binding.value(e)
          }
        }
        el._vueClickOutSide_ = documentHandler
        document.addEventListener('click', documentHandler)
      },
      unbind: function(el, binding) {
        document.removeEventListener('click', el._vueClickOutSide_)
        delete el._vueClickOutSide_
      }
    }
  },
  data() {
    return {
      foo: 'Hello, world',
      coo: 'Hello,rui',
      invTime: 2000,
      // switch
      lightSwitch: false,
      switchLight: true,
      value: '',
      show: false,
      slides: [
        {
          src: require('../../assets/hero/01.jpg'),
          title: '测试测试测试1',
          href: 'detail/analysis'
        },
        {
          src: require('../../assets/hero/02.jpg'),
          title: '测试测试测试2',
          href: 'detail/count'
        }
      ],
      form: {
        timeUnit: 1
      },
      startTime: '',
      endTime: '',
      pickerOptions: {
        disabledDate: this.disabledDate
      },
      // 开始时间小于等于今天可选
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      // 结束时间小于等于开始时间可选  - 8.64e7
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7 ||
        time.getTime() < new Date(this.startTime).getTime() - 8.64e7
        }
      },
      activities: [{
        content: '支持使用图标',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-location-outline'
      }, {
        content: '支持自定义颜色',
        size: 'large',
        type: 'info',
        icon: 'el-icon-location'
      }, {
        content: '支持自定义尺寸',
        size: 'large',
        type: 'info',
        icon: 'el-icon-location'
      }, {
        content: '默认样式的节点',
        size: 'large',
        type: 'danger',
        icon: 'el-icon-location'
      }]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted() {
    // 此处初始化defaultCheckedKeys，没效果
    this.defaultCheckedKeys = [1001]
  },
  created() {
    // 注意：初始化defaultCheckedKeys时，在created里面
    // 父组件先执行自己的created，然后子组件开始执行自己的created和mounted，最后父组件再执行自己的mounted。
    // 因为此页面加载，先执行该组件自己的created，然后执行TreeSelect组件的created和mounted，最后执行该组件的mounted
    this.defaultCheckedKeys = [1000]
  },
  methods: {
    warning() {
      const h = this.$createElement
      this.$notify({
        title: 'GitHub',
        message: h('div', [
          h('p', '[GitHub] Subscribed to ElemeFE/element notifications'),
          h('el-button', {}, '已读')
        ])
      })
    },
    reciveRocket() {
      console.log('reciveRocket success')
    },
    toTime() {
      location.href = './static/canvas/index.html'
    },
    handleClose: function() {
      this.show = false
    },
    disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7
    }

  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    padding:10px 20px;
    height: 100%;
    width:auto;
  }
  &-text {
    font-size: 20px;
    line-height: 20px;
    padding: 10px 0;
  }
}
.slider-container{
  width:25%;
}
[v-cloak]{
  display: none;
}
.main{
  width: 125px;
}
.btn{
  display: block;
  width: 100%;
  color: #fff;
  background-color:#39f;
  border:0;
  padding:6px;
  text-align:center;
  font-size:12px;
  border-radius:4px;
  cursor:pointer;
  outline:none;
  position:relative;
}
.btn:active{
  top:1px;
  left:1px;
}
.dropdown{
  width:100%;
  height:150px;
  margin:5px 0;
  font-size:12px;
  background-color:#fff;
  border-radius:4px;
  box-shadow: 0 1px 6px rgba(0,0,0,.2)
}
.dropdown p{
  display:inline-block;
  padding: 6px;
}
</style>
